<template>
	<el-dialog title="任务添加" :visible.sync="dialogVisible" width="70%" :before-close="handleClose">
		<div class="support-pupop">
			<el-form class="support-pupop_form">
				<el-form-item label="任务信息" :required="true">
					<div class="support-pupop_cot">
						<div class="support-pupop_bt">
							<el-select class="support-pupop_cxt" v-model="paraModel.siteId" placeholder="全部">
								<el-option class="support-pupop_conter" v-for="item in conditionArray.projects" :key="item.key" :label="item.value" :value="item.key">
									<div class="support-pupop_mli">
										<img class="support-pupop_cImg" :src="item.icon" />
										<span class="support-pupop_cTxt">{{ item.value }}</span>
									</div>
								</el-option>
							</el-select>
						</div>
						<div class="support-pupop_bt">
							<el-select class="support-pupop_cxt" v-model="paraModel.type" placeholder="全部">
								<el-option class="support-pupop_conter" v-for="item in conditionArray.types" :key="item.key" :label="item.value" :value="item.key">
									<div class="support-pupop_mli">
										<span class="support-pupop_cTxt">{{ item.value }}</span>
									</div>
								</el-option>
							</el-select>
						</div>
						<div class="support-pupop_bt">
							<el-select class="support-pupop_cxt" v-model="paraModel.priority" placeholder="全部">
								<el-option class="support-pupop_conter" v-for="item in conditionArray.priorities" :key="item.key" :label="item.value" :value="item.key">
									<div class="support-pupop_mli">
										<img class="support-pupop_cImg" :src="item.icon" />
										<span class="support-pupop_cTxt">{{ item.value }}</span>
									</div>
								</el-option>
							</el-select>
						</div>
						<div class="support-pupop_bt">
							<el-select class="support-pupop_cxt" v-model="paraModel.userId" placeholder="全部">
								<el-option class="support-pupop_conter" v-for="item in conditionArray.employees" :key="item.key" :label="item.value" :value="item.key">
									<div class="support-pupop_mli">
										<img class="support-pupop_cImg" :src="item.icon" />
										<span class="support-pupop_cTxt">{{ item.value }}</span>
									</div>
								</el-option>
							</el-select>
						</div>
						协助人
						<div class="support-pupop_bt">
							<el-select class="support-pupop_cxt" v-model="paraModel.helpUserId" placeholder="全部">
								<el-option class="support-pupop_conter" v-for="item in conditionArray.employees" :key="item.key" :label="item.value" :value="item.key">
									<div class="support-pupop_mli">
										<img class="support-pupop_cImg" :src="item.icon" />
										<span class="support-pupop_cTxt">{{ item.value }}</span>
									</div>
								</el-option>
							</el-select>
						</div>
					</div>
					<div class="support-pupop_intro">请选择项目、优先级、和责任人</div>
				</el-form-item>
				<el-form-item label="任务名称" :required="true">
					<el-input v-model="paraModel.name" maxlength="20"></el-input>
					<div class="support-pupop_intro">输入任务的名称，尽可能的把问题表达清晰，不能超过20个字</div>
				</el-form-item>
				<el-form-item label="任务详情" :required="true">
					<x-markdown style="width:1100px;" ref="xMarkdown" v-model="paraModel.content" :editable="false"></x-markdown>
					<div class="support-pupop_intro">使用一级大纲、二级大纲、将内容表达清楚,图片可以直接粘贴复制，可以使用全屏编辑体验更好</div>
				</el-form-item>
			</el-form>
		</div>
		<span slot="footer" class="dialog-footer">
			<el-button @click="dialogVisible = false">取 消</el-button>
			<el-button type="primary" @click="submit">确 定</el-button>
		</span>
	</el-dialog>
</template>
<script>
	export default {
		data() {
			return {
				viewModel: {},
				dialogVisible: false,
				conditionArray: [],
				defaultContent: '## 任务项一说明概述 \n - [ ] 任务项一的任务点1 \n - [ ] 多选框任务项一的任务点2 \n - [X] 多选框任务项一的任务点3 \n \n## 任务项二说明概述 \n - [ ] 任务项二的任务点1 \n - [ ] 多选框任务项二的任务点2 \n - [X] 多选框任务项二的任务点3',
				paraModel: {
					siteId: '',
					priority: '',
					type: 1,
					userId: ''
				}
			}
		},
		methods: {
			open(data, vConter) {
				this.conditionArray = vConter
				this.viewModel = data
				this.paraModel.siteId = this.viewModel.siteId
				this.paraModel.priority = this.viewModel.priority
				this.paraModel.type = 3
				this.paraModel.content = this.defaultContent
				this.paraModel.userId = this.viewModel.userId
				this.paraModel.helpUserId = this.viewModel.userId
				this.dialogVisible = true
			},
			handleClose() {
				this.dialogVisible = false
			},
			async submit() {
				var result = await this.$ala.httpPost('Api/CustomerMatter/Add', this.paraModel)
				if (result) {
					this.handleClose()
					this.paraModel = {}
					if (this.$refs.xMarkdown) {
						this.$refs.xMarkdown.init(this.defaultContent)
					}
					this.$emit('supportPupopInit')
				}
			}
		}
	}
</script>
<style lang="scss">
	@import './support-pupop.scss';
</style>